<template>
    <div class="home-view">
        <mu-load-more @refresh="refresh"
                      :refreshing="refreshing"
                      :loading="loading"
                      @load="load">
            <sort-select-button
                    :left="left"
                    :right="right"
                    @leftClick="leftClick"
                    @rightClick="rightClick">
            </sort-select-button>
            <declaimer-container ref="container">
                <template v-for="i in voices">
                    <declaimer-items
                            :work_content="i['work_content']"
                            :title="'['+i['artist']+'] '+i['title'] "
                            :thumb="i['thumb']"
                            :view="i['view']"
                            :rank="i['rank']"
                            :upload="i['upload']"
                            :time_info="i['time_info']"
                            :color="i['theme']"
                            v-on:dItemClick="toDetailPage(i)"/>
                </template>
            </declaimer-container>
        </mu-load-more>
        <float-button
                value="arrow_upward"
                bg_color="white"
                icon_color="black"
                v-on:floatButtonClick="toTop"
                small v-if="to_top">
        </float-button>
    </div>
</template>

<script>
    import DeclaimerItems from '@/components/DeclaimerItem'
    import DeclaimerContainer from '@/components/DeclaimerContainer'
    import FloatButton from "@/components/FloatButton"
    import SortSelectButton from "@/components/SortSelectButton"

    export default {
        name: "Home",
        components: {
            DeclaimerItems,
            DeclaimerContainer,
            FloatButton,
            SortSelectButton
        },
        data() {
            return {
                refreshing: false,
                loading: false,
                page: 1,
                to_top: false,
                voices: [],
                left: "true",
                right: "false",
            }
        },
        methods: {
            getVoices(next = false, getWay = "true", size = 10) {
                if (!next) {
                    this.page = 1
                    this.voices = []
                }
                this.$store.dispatch('getWorksList', {pageNum: this.page, pageSize: size, getWay: getWay}).then(
                    (res) => {
                        console.log(res)
                        if (res.data.code === 0) {
                            for (let i in res.data.data) {
                                //console.log(i)
                                this.voices.push(this.$musicFormat(res.data.data[i]))
                            }
                        }
                        this.page += 1
                        this.refreshing = false;
                    }
                ).catch(e => {
                    this.refreshing = false;
                    console.log(e)
                })
            },
            toDetailPage(info) {
                if (info != null) {
                    this.$store.commit('selectVoice', info)
                    this.$router.push('/declaimer/voiceDetail/' + info.id)
                    this.$store.commit('updateBackendPlay', false)
                } else {
                    this.$toast.message("打开失败，请稍后再打开!")
                }
            },
            refresh() {
                this.refreshing = true;
                this.$refs.container.scrollTop = 0;
                this.getVoices(false, this.left)
            },
            load() {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getVoices(true, this.left);
                }, 2000)
            },
            isShowTopBtn() {
                let index1 = Math.ceil(document.documentElement.scrollTop / (document.body.offsetHeight * 0.5))
                let index2 = Math.ceil(document.body.scrollTop / (document.body.offsetHeight * 0.48))
                let index = index1 > index2 ? index1 : index2
                index = index <= 0 ? 1 : index % this.voices.length
                this.$store.commit('updateTopBar', this.voices[index - 1].theme)
                if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
                    this.to_top = true
                } else {
                    this.to_top = false
                }
                if (document.body.scrollTop < 0 || document.documentElement.scrollTop < 0) {
                    document.body.scrollTop = 0
                    document.documentElement.scrollTop = 0
                }
            },
            toTop() {
                document.body.scrollTop = 0
                document.documentElement.scrollTop = 0
            },
            rightClick() {
                this.right = 'true'
                this.left = 'false'
                this.getVoices(false, this.left)
            },
            leftClick() {
                this.right = "false"
                this.left = 'true'
                this.getVoices(false, this.left)
            }
        },
        mounted() {
            window.addEventListener('scroll', this.isShowTopBtn, false)
        },
        created() {
            this.getVoices()
            this.$store.commit('updateTopTile', '享念 朗读室')
            this.$store.commit('updateBackTo', '/declaimer/home')
        },
        destroyed() {
            window.removeEventListener('scroll', this.isShowTopBtn, false)
        }
    }
</script>

<style lang="stylus">
    .home-view
        position relative
        margin-bottom 10vh
        top 5vh
</style>